.header, .footer {
    background-color: rgb(189, 183, 183);
    color: white;
    padding: 20px;
}
* {
    box-sizing: border-box;
}
/* 如何让li 元素竖着在左边，the city 在右边？
    让一个大的div包含者的两个小的div(列表div和the city这个div)都向左浮动
    .column {
    float: left;
    padding: 10px;
    }

    如何让浮动还占据位置？
    .clearfix::after {
    content: "";
    clear: both;
    display: table;
    }

    box-sizing: border-box;?
    告诉浏览器 如果width：100px， 则这个内容宽度是100-border-padding 的值；
    box-sizing: content-box;?
    告诉浏览器 如果width：100px，则这个内容宽度是100px,整个宽度是100+border+padding;
    
*/
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.menu {
    width: 25%;
}
.content {
    width: 75%;
}
/* 去list-style-type写到ul标签上 */
.menu ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.menu li{
    /* list-style-type: none; */
    background-color: rgb(173, 173, 223);
    padding: 8px;
    color: white;
    margin-bottom: 8px;
}
.menu li:hover {
    background-color: blue;
}

span {
    float: left;
    font-size: 400%;
    width: 0.7em;
    line-height: 80%;
    font-family: Arial, Helvetica, sans-serif;
}

.nav {
    list-style-type: none;
    background-color: yellow;
    /* 为何导航栏不能横着过来呢？ */

    /* 一般设置了list-style-type之后得设置margin:0,padding:0; */
    margin: 0;
    padding: 0;

}
.nav li {
    /* 应该让li元素变成display:inline-block;显示为内联块，而不是ul显示成为内联块； */
    display: inline-block;
    font-size: 20px;
    padding: 20px;
}
li:active{
    color: palevioletred;
}

/* 元素水平居中对齐 如果未设置width,或width设置100% 则元素水平居中则无效*/
.center {
    border: 10px solid rgb(160, 220, 71);
    margin: auto;
    width: 50%;
}
.center p {
    padding: 20px;
    margin: 20px;
    text-align: center;
}
/* 图像的居中对齐 */
#picture {
    margin-left: auto;
    margin-right: auto;
    /* width: 50%; */
    padding: 20px;
    display: block;
}

.clearfix {
    border: 2px solid greenyellow;
    /* float: right; */
    padding: 10px;
    overflow: auto;
}
.img2 {
    float: right;
    /* display: block; */
    padding: 10px;
}
.center2 {
    border: 3px solid greenyellow;
    margin: 30px;
    /* height: 300px; */
    /* 用padding:30px 0;可以将元素垂直对齐；但为什么设置了height:100px 就不行了呢？ */
    padding: 70px 0;
}
.center3 {
    border: 3px solid greenyellow;
    height: 200px;
    text-align: center;
    line-height: 200px;
}
.center3 p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}
/* 一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器。您可以使用 clearfix hack 来解决此问题（请看下面的例子）。overflow:auto; */

.center4 {
    border: 3px solid greenyellow;
    margin: 20px;
    padding: 20px;
    text-align: center;
    height: 200px;
    position: relative;
}
.center4 p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* 组合选择器
    div p { } div内的所有后代p元素，可以是儿子，孙子，孙孙...子
    div > p { } 指定元素div元素的子元素p的所有元素，只能是儿子
    div + p { } 相邻兄弟选择器，指定元素的相邻同级的元素；有相同的父元素；
    div ~ p { }    通用兄弟选择器，指定元素的所有的兄弟；
 
*/